<template>
  <div>
    <!-- 表单或其他内容 -->

    <!-- 导出按钮 -->
    <el-row :gutter="20">
      <el-col :span="12" class="list-1">
        <el-card>
          <el-button type="primary" @click="exportToExcel">导出</el-button>
          <button @click="exportToExcel">Export Data</button>
          <el-button @click="toggleSelection(tableData)">切换第二、第三行的选中状态</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>
          <!-- 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。 -->
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            :default-sort="{ prop: 'date', order: 'descending' }"
            :span-method="arraySpanMethod"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" width="100" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="150" sortable> </el-table-column>
            <el-table-column label="配送信息" align="center">
              <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
              <el-table-column prop="province" label="省份" width="120"> </el-table-column>
              <el-table-column prop="city" label="市区" width="120"> </el-table-column>
            </el-table-column>

            <el-table-column prop="address" label="地址" width="300"> </el-table-column>
            <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12" class="list">
        <el-card>
          <!-- 无限滚动 -->
          <template>
            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
              <ul class="item">
                <li v-for="item in listData">
                  <span class="title" v-text="item.title"></span
                  ><span class="date" v-text="item.date"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
        </el-card>
        <!-- 动态增减表单项 -->
        <el-card class="card-2">
          <!-- 文件上传与下载 -->
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :accept="fileAccept"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-card>
        <el-card class="card-2">
          <!-- 照片墙 -->
          <vueSeamlessScroll :data="photos" class="seamless-warp" :class-option="classOption2">
            <div class="photo-wall">
              <div v-for="(photo, index) in photos" :key="index" class="photo-item">
                <img :src="photo.url" :alt="photo.alt" />
              </div>
            </div>
          </vueSeamlessScroll>
        </el-card>
        <el-card>11111</el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  props: {},
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      fileList: [], // 用于存储上传的文件列表
      photos: [
        {
          url: "https://bpic.588ku.com/back_origin_min_pic/20/04/19/f753e29e3dbe2ad75b8f6d6053199faa.jpg",
          alt: "Photo 1",
        },
        {
          url: "https://ts1.cn.mm.bing.net/th/id/R-C.9018c4f47b9796cbea207325cb60e457?rik=TKWy9KALYKcXBg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f92%2f1692.jpg&ehk=YB59358%2fCaARUufRoOEdKK9gWz%2fCdnQLXvP%2fn8DAPrA%3d&risl=&pid=ImgRaw&r=0",
          alt: "Photo 1",
        },
        {
          url: "https://bpic.588ku.com/back_origin_min_pic/20/04/19/f753e29e3dbe2ad75b8f6d6053199faa.jpg",
          alt: "Photo 1",
        },
        {
          url: "https://bpic.588ku.com/back_origin_min_pic/20/04/19/f753e29e3dbe2ad75b8f6d6053199faa.jpg",
          alt: "Photo 1",
        },

        // Add more photo objects as needed
      ],
      fileAccept: "image/*", // 这里设置为允许上传图片类型，可以根据需求调整
      // 文件上传与下载
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      tableData: [
        {
          date: "2016-05-03",
          name: "张三",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "李四",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王五",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "赵六",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "沈七",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "赵八",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "张九",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],

      multipleSelection: [],
    };
  },
  computed: {
    classOption() {
      return {
        direction: 1, //滚动方向 0：向上 1：向下 2：向左 3：向右
        step: 0.5, //滚动步长
        speed: 50, //滚动速度
        limitMoveNum: 6, //滚动的步数
        hoverStop: true, //是否开启鼠标悬停stop
        limitMove: true, //是否开启回弹
        autoPlay: true, //是否自动播放
        interval: 3000, //自动播放间隔时间
        showBtn: true, //是否显示左右按钮
        showDot: true, //是否显示指示点
        responsive: true, //是否响应式
      };
    },
    classOption2() {
      return {
        direction: 2, //滚动方向 0：向上 1：向下 2：向左 3：向右
        step: 2, //滚动步长
        speed: 50, //滚动速度
        limitMoveNum: 2, //滚动的步数
        hoverStop: true, //是否开启鼠标悬停stop
        limitMove: true, //是否开启回弹
        autoPlay: true, //是否自动播放
        interval: 3000, //自动播放间隔时间
        showBtn: true, //是否显示左右按钮
        showDot: true, //是否显示指示点
        responsive: true, //是否响应式
      };
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //处理文件上传成功与失败
    handleSuccess(response, file, fileList) {
      // 文件上传成功时触发
      console.log("上传成功", response, file, fileList);
      this.fileList = fileList; // 更新文件列表
      console.log(this.fileList, "fileList");
    },
    handleError(error, file, fileList) {
      // 文件上传失败时触发
      console.error("上传失败", error, file, fileList);
    },
    //     //文件上传与下载
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
      const fileUrl = file.url; // 替换为你的文件路径
      const link = document.createElement("a");
      link.href = fileUrl;
      link.download = file.name; // 指定下载时的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    //合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log("行数据:", row, "列数据", column, rowIndex, columnIndex);
      //合并第一列的第一行和第二行
      // if (rowIndex === 0) {
      //   if (columnIndex === 0) {
      //     return [1, 2];
      //   }
      // }
    },

    toggleSelection(rows) {
      if (rows) {
        console.log(rows, "rows");
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },

    //处理表格编辑
    handleClick(row) {
      console.log(row);
    },

    exportToExcel() {
      // 准备导出的数据
      const data = this.tableData.map((item) => [
        item.date,
        item.name,
        item.province,
        item.city,
        item.address,
        item.zip,
      ]);
      console.log(data);
      // 创建工作表对象
      // aoa_to_sheet 方法接受一个二维数组作为参数，返回一个工作表对象
      //配置表头

      const ws = XLSX.utils.aoa_to_sheet([
        ["Date", "Name", "Province", "City", "Address", "Zip"],
        ...data,
      ]);

      // 创建工作簿对象，并将工作表添加到工作簿中
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      // 使用 XLSX.writeFile 方法将工作簿写入文件并下载
      XLSX.writeFile(wb, "exported_data.xlsx");
    },
  },
};
</script>

<style scoped lang="less">
.seamless-warp {
  height: 150px;
  overflow: hidden;
}
.card-2 {
  margin-top: 10px;
}
.photo-wall {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}

.photo-item {
  width: 250px;
  height: 250px;
  margin: 0 10px;

  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
